<template>
  <div class="user-info">
    <div class="left">
      <img
        class="logo"
        v-logo-error
        :src="profile?.headimgurl"
        alt=""
        v-if="profile?.headimgurl"
      />
      <img
        class="logo"
        src="~/assets/images/user-logo/default_logo.jpg"
        alt=""
        v-else
      />
      <div class="details">
        <div class="nickname">
          {{ profile?.last_name + ' '+ profile?.first_name }}
        </div>
        <div class="infos">
          <template
            v-if="profile?.sex && globalStore.sexTools.getSexById(profile?.sex)"
          >
            <span>{{ globalStore.sexTools.getSexById(profile?.sex) }}</span>
            <span class="split">|</span>
          </template>
          <template
            v-if="
              profile?.country_id &&
              countryStore.getCountryById(profile?.country_id)
            "
          >
            <span>{{ countryStore.getCountryById(profile?.country_id) }}</span>
            <span class="split">|</span>
          </template>
          <span v-if="profile?.birthday">{{ profile?.birthday }}</span>
          <span
            v-if="false"
            class="status"
            :class="profile?.status == '1' ? '' : 'offline'"
            >{{
              profile?.status == "1" ? $t("tag.on_job") : $t("tag.off_job")
            }}</span
          >
        </div>
        <div class="tags">
          <div v-if="profile?.language && profile?.language.length > 0">
            <div v-for="(item, index) in profile?.language" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== profile?.language.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.education && profile?.education.length > 0">
            <div v-for="(item, index) in profile?.education" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== profile?.education.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.certificate && profile?.certificate.length > 0">
            <div v-for="(item, index) in profile?.certificate" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== profile?.certificate.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.air_model && profile?.air_model.length > 0">
            <div v-for="(item, index) in profile?.air_model" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== profile?.air_model.length - 1">/</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-btn" @click="goto('/new_profile/base')">
        <svg
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M2.5 4.16258C2.5 3.24436 3.24385 2.5 4.16258 2.5H15.8374C16.7557 2.5 17.5 3.24385 17.5 4.16258V15.8374C17.5 16.7557 16.7562 17.5 15.8374 17.5H4.16258C3.24436 17.5 2.5 16.7562 2.5 15.8374V4.16258ZM4.16667 4.16667V15.8333H15.8333V4.16667H4.16667ZM6.64347 15.1507C6.12789 14.9274 5.63932 14.6536 5.18402 14.3353C6.22311 12.7294 8.03002 11.6667 10.0852 11.6667C12.0846 11.6667 13.8491 12.6726 14.9001 14.206C14.4532 14.5363 13.972 14.8231 13.4629 15.0598C12.706 14.0138 11.475 13.3333 10.0852 13.3333C8.65542 13.3333 7.39392 14.0534 6.64347 15.1507ZM10 10.8333C8.38917 10.8333 7.08333 9.5275 7.08333 7.91667C7.08333 6.30583 8.38917 5 10 5C11.6108 5 12.9167 6.30583 12.9167 7.91667C12.9167 9.5275 11.6108 10.8333 10 10.8333ZM10 9.16667C10.6903 9.16667 11.25 8.607 11.25 7.91667C11.25 7.22631 10.6903 6.66667 10 6.66667C9.30967 6.66667 8.75 7.22631 8.75 7.91667C8.75 8.607 9.30967 9.16667 10 9.16667Z"
            fill="#3D88F2"
          />
        </svg>
        <span>{{ $t("btnText.personal_center") }}</span>
      </div>
    </div>
  </div>
  <div class="divider-line"></div>
</template>

<script setup lang="ts">
import {
  useMemberStore,
  useCountryStore,
  useGlobalStore,
} from "../../../store";
import { useRoute } from "vue-router";

const { profile } = useMemberStore();
const countryStore = useCountryStore();
const globalStore = useGlobalStore();

const route = useRoute();
const onClickAccountInfo = () => {
  goto("/member/account");
};
</script>
<style scoped lang="less">
.divider-line {
  margin: 24px 0;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    gap: 24px;
  }
  .right {
    .right-btn {
      display: flex;
      gap: 4px;
      align-items: center;
      color: #3d88f2;
      border-radius: 10px;
      padding: 10px 16px;
      font-size: 14px;
      background: rgba(61, 136, 242, 0.1);
      transition: all 0.3s;
      cursor: pointer;
      &:hover {
        background: rgba(61, 136, 242, 0.2);
      }
      svg {
        width: 20px;
        height: 20px;
      }
    }
  }
  .logo {
    width: 64px;
    height: 64px;
  }
  .details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    .nickname {
      font-size: 16px;
      color: #172026;
    }
    .infos {
      display: flex;
      gap: 8px;
      align-items: center;
      color: #36434d;
      font-size: 14px;
      .status {
        padding: 4px 8px;
        background: rgba(54, 217, 108, 0.1);
        border-radius: 6px 6px 6px 6px;
        font-size: 12px;
        color: #36d96c;
      }
      .split {
        color: #ccd6de;
      }
    }
    .tags {
      font-size: 14px;
      color: #36434d;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      & > div {
        padding: 4px 8px;
        border-radius: 6px;
        background-color: #f5f8fa;
        display: flex;
        flex-wrap: wrap;
        & > div {
          display: inline-block;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  /* 768px以下的屏幕 */
  .user-info {
    .right {
      display: none;
    }
    .left {
      gap: 123px;
    }
    .logo {
      width: 246px;
      height: 246px;
      flex-shrink: 0;
    }
    .details {
      gap: 41px;
      .nickname {
        font-size: 82px;
      }
      .infos {
        font-size: 67px;
        gap: 41px;
        .status {
          padding: 20px 41px;
          border-radius: 31px;
          font-size: 61px;
        }
      }
      .tags {
        transform: translateX(-369px);
        gap: 41px;
        font-size: 61px;
        flex-wrap: wrap;
        & > div {
          white-space: nowrap;
          border-radius: 31px 31px 31px 31px;
          padding: 20px 41px;
          & > div {
            display: inline-block;
          }
        }
      }
    }
  }
  .divider-line {
    margin: 123px 0;
  }
}
</style>
